<template>
  <div id="app" class="bg">
    <h2>用户 {{ userNickName }} 的个人信息修改</h2>

    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="修改昵称:">
        <el-input v-model="form.nickName"></el-input>
      </el-form-item>
    
      <el-form-item label="修改默认地址:">
        <el-input v-model="form.address"></el-input>
      </el-form-item>

      <el-form-item label-width="10px">
        <el-button type="primary" @click="onSubmit">确认修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import router from "../router";
import jwt_decode from "jwt-decode";
export default {
  data() {
    return {
      userNickName: "",
      form: {
        nickName: "",
      
        address: "",
      },
    };
  },
  mounted() {
    this.getNickAndAddress();
  },
  methods: {
    onSubmit() {
      this.$axios({
        url: "/user/registUser",
        method: "post",
        data: {
          nickName: this.form.nickName,
         
          address: this.form.address,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          "x-access-token": localStorage.getItem("x-access-token"),
        },
      })
        .then(function (response) {
          console.log(response);

          if ("昵称不能为空" == response.data.extend.result) {
            // this.$message.error("昵称不能为空");
            alert("昵称不能为空");
          }

          // if ("密码不能为空" == response.data.extend.result) {
          //   // this.$message.error("密码不能为空");
          //   alert("密码不能为空");
          // }
          if ("默认地址不能为空" == response.data.extend.result) {
            // this.$message.error("默认地址不能为空");
            alert("默认地址不能为空");
          }
          // if (
          //   "密码必须由数字、字母两种字符组成,长度在8-15位之间" ==
          //   response.data.extend.result
          // ) {
          //   // this.$message.error(
          //   //   "密码必须由数字、字母两种字符组成,长度在8-15位之间"
          //   // );

          //   alert("密码必须由数字、字母两种字符组成,长度在8-15位之间");
          // }
          if (response.data.code == 200) {
            alert("修改成功");
            router.push("/userInfo");
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    //获取用户昵称和地址
    getNickAndAddress() {
      this.$axios
        .get("/user", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
          var resData = res.data.extend.nickName;
          this.userNickName = resData;
          this.form.nickName = res.data.extend.nickName;
          this.form.address = res.data.extend.address;
        });
    },
  },
};
</script>

<style>
/* .el-input__inner {
  width: 30%;
  text-align: left;
  margin-left: -470px;
} */

#app {
  width: 100%;
  height: 100%;
}
.edit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 25rem;
  height: 35.5rem;
  background-color: #fff;
  z-index: 100;
  border: 1px solid black;
  border-radius: 3.125rem;
}
.edit h1 {
  text-align: center;
  padding-top: 1.25rem;
  padding-bottom: 3.75rem;
}
.edit {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}
.shurukuang {
  display: flex;
  padding-bottom: 2.5rem;
}
.tijiao {
  position: absolute;
  bottom: 4.75rem;
  right: 2.25rem;
  width: 6.5rem;
  height: 2rem;
}
.toedit {
  position: absolute;
  top: 5.75rem;
  right: 28.25rem;
  width: 6.5rem;
  height: 2rem;
}
html {
  background: url("../assets/img/bg.png") no-repeat;
  background-size: cover;
  /* background-color: aqua; */
  height: 100vh;
}
</style>